<template>
  <div class="app-container">
    <!-- 添加角色按钮 -->
    <el-button type="primary" @click="handlerAddRole">
      {{ $t('permission.addRole') }}
    </el-button>

    <el-table :data="rolesList" style="width: 100%;margin-top: 1%;" border>
      <el-table-column align="center" label="角色编码" width="220">
        <template slot-scope="scope">
          {{ scope.row.roleCode }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="角色名称" width="220">
        <template slot-scope="scope">
          {{ scope.row.roleName }}
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="handleEdit(scope)">
            {{ $t('permission.editPermission') }}
          </el-button>
          <el-button type="danger" size="small" @click="handleDelete(scope)">
            {{ $t('permission.delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'Edit Role':'New Role'">
      <el-form :model="role" label-width="80px" label-position="left">
        <el-form-item label="RoleCode">
          <el-input v-model="role.roleCode" placeholer="Role Code"></el-input>
        </el-form-item>
        <el-form-item label="RoleNmae">
          <el-input v-model="role.roleName" placeholer="Role Name"></el-input>
        </el-form-item>
        <el-form-item label="Menu">
          <el-tree ref="tree" :check-strictly="checkStrictly" :data="routesData" :props="defaultProps" show-checkbox node-key="path" class="permission-tree"/>
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">
          {{ $t('permission.cancel') }}
        </el-button>
        <el-button type="primary" @click="confirmRole">
          {{ $t('permission.confirm') }}
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    import path from 'path'
    import { deepClone } from '@/utils'
    import { getRoutes, getRoles, addRole, deleteRole, updateRole } from '@/api/role'
    import i18n from '@/lang'
    const defaultRole = {
        roleCode: '1',
        roleName: '2'
    }
    export default {
        // name: "角色管理",
        data() {
            return{
                role: Object.assign({}, defaultRole),
                routes:[],
                rolesList:[],
                dialogVisible:false,
                dialogType:'new',
                checkStrictly:false,
                defaultProps:{
                    childen:'children',
                    label:'title'
                }
            }
        },
        computed:{
            routesData(){
                return this.routes
            }
        },
        created() {
            // 从server获取数据
            this.getRoutes()
            this.getRoles()
        },
        methods:{
            async getRoutes(){
                const res = await getRoutes()
                this.serviceRoutes = res.data
                const routes = this.generateRoutes(res.data)
                this.routes = this.i18n(routes)
            },
            async getRoles(){
                const res = await getRoles()
                this.rolesList = res.data.records
            },
            handlerAddRole(){
                this.role = Object.assign({},defaultRole)
                if (this.$refs.tree){
                    this.$refs.tree.setCheckedNodes([])
                }
                this.dialogType = 'new'
                this.dialogVisible = true
            },
            async confirmRole(){
                const isEdit = this.dialogType === 'edit'

                const checkedKeys = this.$refs.tree.getCheckedKeys()
                // 编辑 --》 更新
                if(isEdit){
                    await updateRole(this.role.roleCode,this.role)
                    for(let index = 0;index < this.rolesList.length;index++){
                        if(this.rolesList[index].key === this.role.key){
                            this.rolesList.splic(index,1,Objdect.assign({},this.role))
                            break
                        }
                    }
                }else {
                    const { data } = await addRole(this.role)
                    this.role.roleCode = data.roleCode
                    this.rolesList.push(this.role)
                }
                const { roleCode,roleName } = this.role
                this.dialogVisible = false
                this.$notify({
                    title:'Success',
                    dangerouslyUseHTMLString:true,
                    message:`
                      <div>角色编码:${roleCode}<div>
                      <div>角色名称:${roleName}<div>
                    `,
                    type:'success'
                })
            }
        }
    }

</script>

<style scoped>

</style>
